import * as echarts from 'echarts';

export const role_line_bar=(devAndEngNum,archNum,mgmtNum,devAndEngdevAndEngSalary,archSalary,mgmtSalary,devAndEngAvg,archAvg,mgmtAvg,div_name)=>{
    const myChart = echarts.init(document.getElementById(div_name));
    let option;
    const maxSalary = Math.max(devAndEngdevAndEngSalary, archSalary, mgmtSalary);
    const maxYear = Math.max(devAndEngAvg,archAvg,mgmtAvg);
    option = {
        title: {
            text: "不同身份的招聘岗位数量、平均年薪和平均经验",
            left: 'left',
            // top: '-20px'
        },

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: false }, // 可能不需要切换图表类型的功能
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['人数', '平均年薪', '平均工作经验']
        },
        xAxis: [
            {
                type: 'category',
                data: ['开发工程师', '架构师', '团队负责人'], // X轴标签对应职位类别
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],

        yAxis: [
            {
                type: 'value',
                name: '人数',
                min: 0,
                interval: 500,
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '平均年薪',
                min: maxSalary-150,
                max:maxSalary,
                // 根据实际数据调整最大值和间隔
                interval: 10,
                axisLabel: {
                    formatter: '{value} K' // 假设年薪单位为千，直接在此处格式化
                },
                position: 'right', // 明确将此Y轴置于右侧
                offset: 60, // 可选，调整Y轴间距
            },
            {
                type: 'value',
                name: '平均工作经验',
                min: maxYear-1,
                max:maxYear,
                // 根据实际数据调整最大值和间隔
                interval: 1,
                axisLabel: {
                    formatter: '{value} 年'
                },
                position: 'right', // 同样置于右侧，但通过offset区分
                offset: 0, // 或者调整为合适的值以避免重叠
            }
        ],

        series: [

            {
                name: '人数',
                type: 'bar',
                stack: '总量',
                data: [devAndEngNum, archNum, mgmtNum], // 对应的人数数据
                barWidth:150,

            },
            {
                name: '平均年薪',
                type: 'line',
                yAxisIndex: 1, // 这将对应到第二个Y轴（平均年薪）
                data: [devAndEngdevAndEngSalary, archSalary, mgmtSalary],
                // tooltip中的formatter已直接在Y轴配置中处理，此处可省略
            },

            {
                name: '平均工作经验',
                type: 'line',
                yAxisIndex: 2, // 新增的第三个Y轴，用于平均工作经验
                data: [devAndEngAvg, archAvg, mgmtAvg],
                // 同样，tooltip中的formatter在这里可以省略，因为轴标签已经格式化
            }


        ]
    };
    myChart.setOption(option);
    myChart.resize();
    window.addEventListener('resize', () => myChart.resize);

}


export const degree_pie= (Degree,div_name)=> {

    const myChart = echarts.init(document.getElementById(div_name));

    let option;
    let title = '';
    // 初始化一个空数组用于存放格式化后的数据
    const pieData = [];
    // 遍历对象的属性
    for (const key in Degree) {
        if (Object.prototype.hasOwnProperty.call(Degree, key)) { // 确保只访问自身的属性
            // 将每项数据构造成ECharts所需格式并添加到数组中
            pieData.push({ value: Degree[key], name: key });
        }
    }
    if (div_name === "Role_pie1") {
        title = '开发工程师学历分布';

    }
    else if (div_name === "Role_pie2")
    {
        title = '架构师学历分布';
    }
    else if (div_name === "Role_pie3")
    {
        title = '团队负责人学历分布';
    }
    option = {
        title: {
            text: title,
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '学历分布',
                type: 'pie',
                radius: '50%',
                grid: { containLabel: true },
                data: pieData.map(item => ({ ...item, value: parseFloat(item.value), })), // 确保value是数值类型，以便计算百分比
                label: { // 添加这一部分来显示百分比
                    show: true,
                    formatter: '{b}: {d}%',
                    position: 'outer'
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
    myChart.resize();
    window.addEventListener('resize', () => myChart.resize);
}
